<template>
  <div id="app">
    <h1>父组件标题</h1>
    <p>渲染信息:{{ msg }}</p>
    <p>渲染年级{{ age }}</p>
    <button @click="changeNum">增加年龄</button>
    <hr />
    <HelloWorld :msg="msg" :age="age">
      <template #hash>
        <p>这个时传入自组建中的解构</p>
      </template>
      <template>
        <p>这个是插槽结构的具体内容</p>
      </template>
      <template #footer>
        <p>这个是具名插槽的底步</p>
      </template>
    </HelloWorld>
  </div>
</template>



<script>
import { ref } from "vue";
import HelloWorld from "./components/helloWold.vue";
export default {
  components: { HelloWorld },
  name: "app",
  setup() {
    let msg = ref("我是大帅哥");
    let age = ref(20);
    let user = {
      IdCare: 123124,
      addr: "湖南省",
      price: 20000,
    };

    function changeNum() {
      age.value += 2;
    }

    return {
      msg,
      age,
      user,
      changeNum,
    };
  },
};
</script>

<style>
</style>
